define(['durandal/app', 'durandal/composition', 'knockout', 'jquery'],
    function (app, composition, ko, $) {
        function ViewModel() {
            var $dom = null;

            composition.addBindingHandler('Example01', {
                init: function (dom) {
                    $dom = $(dom);

                    init();
                }
            });

            function init() {
                initAlbums();
                initEvents();
            }

            function initAlbums() {
                var aImg = $dom.find("#album img");
                for (var i = 0; i < aImg.length; i++) {
                    //1.图片旋转分散，rotateY的值会影响translateZ的方向，可以尝试将每个元素的rotateY设置为0deg即可一目了然。
                    //2.transition的值有规律设置而不是统一一个值，使得过渡效果变得有层次感。可以尝试将所有元素的transition设置为1s进行对比。
                    $(aImg[i]).css({
                        transform: 'rotateY(' + i * 360 / aImg.length + 'deg) translateZ(3rem)',
                        transition: 'transform 1s ' + (aImg.length - i) * 0.1 + 's'
                    });
                }
            }

            function initEvents() {
                var lastX = 0, // 前一次的坐标X
                    lastY = 0,
                    nowX = 0, // 当前的坐标X
                    nowY = 0,
                    desX = 0,
                    desY = 0,
                    rotX = -30,
                    rotY = 0,
                    timer; // 时间间隔
                $dom[0].onmousedown = function (e) {
                    var e = e || event;
                    lastX = e.clientX;
                    lastY = e.clientY;

                    this.onmousemove = function (e) {
                        var e = e || event;
                        nowX = e.clientX;
                        nowY = e.clientY;
                        desX = nowX - lastX;
                        desY = nowY - lastY;
                        // 1.在X方向滑动，album 实际上要执行的是 rotateY；在Y方向上滑动 album 实际上要执行的是 rotateX。
                        // 2.更新album的旋转角度，拖拽越快-> des变化大 -> roY变化大 -> 旋转快。
                        rotX -= desY * 0.1;
                        rotY += desX * 0.2;
                        $dom.find('#album').css({transform: 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)'});
                        lastX = nowX;
                        lastY = nowY;
                    };

                    this.onmouseup = function () {
                        this.onmousemove = this.onmouseup = null;
                        timer = setInterval(function () {
                            //*0.95相当于每次衰减5%
                            desX *= 0.95;
                            desY *= 0.95;
                            rotX -= desY * 0.1;
                            rotY += desX * 0.2;
                            $dom.find('#album').css({transform: 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)'});
                            //这个限制条件使得setInterval可以停下来
                            if (Math.abs(desX) < 0.5 && Math.abs(desY) < 0.5) {
                                clearInterval(timer);
                            }
                        }, 20)
                    };
                    // 阻止默认行为
                    return false;
                }
            }
        }

        return ViewModel;
    });
